<template>
	<view class="login-page">
		<!-- #ifdef MP-WEIXIN -->
		<u-navbar :placeholder="false" bgColor="rgba(0,0,0,0.0)" :autoBack="false">
			<view slot="left">
				<u-icon name="arrow-left" color="#000000" @click="gohome" size="22"></u-icon>
			</view>
		</u-navbar>
		<!-- #endif -->
		<view class="head-top">
			<image class="head-title" src="https://m.lqvvvv.com/assets/static/login/titlle.png" mode=""></image>
			<view class="name">
				旅趣App
			</view>
		</view>
		<view class="content">
			<!-- #ifdef APP || H5 -->
			<view class="title">
				<image class="tell" src="https://m.lqvvvv.com/assets/static/login/tell.png" mode="widthFix"></image>
			</view>
			<view class="entry">
				<u--input placeholder="请输入手机号" border="none" type="number" v-model="tell"></u--input>
			</view>
			<view class="title">
				<image class="psd" src="https://m.lqvvvv.com/assets/static/login/psd.png" mode="widthFix"></image>
			</view>
			<view class="entry">
				<u-input :type="entry_type" placeholder="请输入密码" border="none" v-model="password">
					<template slot="suffix">
						<u-icon name="eye" v-if="status == true" color="#8B8DA0" size="24" @click="cutType"></u-icon>
						<u-icon v-else name="eye-off" color="#8B8DA0" size="24" @click="cutType"></u-icon>
					</template>
				</u-input>
			</view>
			<view class="forget">
				<text @click="$navTo.togo('/pages/login/forget',{type:'2'})">忘记密码?</text>
			</view>
			<view style="height: 70rpx;"></view>
			<view class="login-btn" @click="gologin">
				<image src="https://m.lqvvvv.com/assets/static/login/login-btn.png" mode=""></image>
			</view>
			<view class="login-btn" @click="$navTo.togo('/pages/login/register')">
				<image src="https://m.lqvvvv.com/assets/static/login/register-btn.png" mode=""></image>
			</view>
			<!-- #endif -->
			<!-- #ifdef APP -->
			<view class="tips">
				<view class="line"></view>
				<view class="tips-text">
					微信快捷登录
				</view>
				<view class="line"></view>
			</view>
			<view class="vx" @click="govxlogin">
				<image src="https://m.lqvvvv.com/assets/static/login/vx.png" mode=""></image>
			</view>
			<!-- #endif -->
			<!-- #ifdef H5 -->
			<view class="tips">
				<view class="line"></view>
				<view class="tips-text">
					微信快捷登录
				</view>
				<view class="line"></view>
			</view>
			<view class="vx" @click="goh5vxlogin">
				<image src="https://m.lqvvvv.com/assets/static/login/vx.png" mode=""></image>
			</view>
			<!-- #endif -->
			<!-- #ifdef MP-WEIXIN -->
			<view class="logo">
				<image src="/static/logo.png" mode=""></image>
			</view>
			<view class="vx">
				<view class="btn">
					<u-button color="#5755F2" @getphonenumber="wxLogin" open-type="getPhoneNumber"
						shape="circle">手机号授权登录</u-button>
				</view>
			</view>
			<!-- #endif -->
			<view class="agreement">
				<u-checkbox-group>
					<u-checkbox @change="handleChange" :checked="checked" size="14" active-color="#19A9FE"
						shape="square"></u-checkbox>
				</u-checkbox-group>
				<view class="agreement-text">
					我已阅读并同意<text @click="goagreement('registrer_agreement')">《服务协议》</text>和 <text
						@click="goagreement('privacy_agreement')">《隐私协议》</text>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	import {
		mapState,
		mapActions
	} from 'vuex';
	export default {
		data() {
			return {
				tell: '',
				password: '',
				entry_type: 'password',
				status: false,
				checked: false,
				logoshow: 0
			}
		},
		computed: {
			...mapState({
				location: state => state.location,
				city: state => state.city
			})
		},
		onShow() {
			// #ifdef H5
			this.checkWeixinCode();
			// #endif
			this.showinfo()
		},
		methods: {
			...mapActions(['getLocation']),
			showinfo() {
				let params = {
					// #ifdef APP
					name: 'hide_status',
					// #endif
					// #ifdef MP-WEIXIN
					name: 'miniapp_hide_status'
					// #endif
				}
				this.$Request({
					method: 'POST',
					url: '/api/index/getConfig',
					data: params,
					ismsg: false,
				}).then(res => {
					if (res.code == 1) {
						this.logoshow = res.data
						if (this.logoshow == 0) {
							this.getLocation()
						}
					}
				})
			},
			checkWeixinCode() {
				const urlParams = new URLSearchParams(window.location.search);
				const code = urlParams.get('code');
				if (code) {
					// 如果有 code，调用 handleWeixinLogin 处理微信登录
					this.handleWeixinLogin();
				}
			},
			wxLogin(e) {
				if (!this.checked) {
					uni.showToast({
						title: '请仔细阅读并同意《注册协议》和《隐私协议》',
						icon: 'none'
					});
					return;
				}
				uni.showLoading({
					title: '授权中...',
					mask: true
				})
				let app = this
				uni.login({
					provider: 'weixin',
					success: loginRes => {
						console.log(loginRes)
						if (e.detail.errMsg == 'getPhoneNumber:ok') {
							uni.hideLoading()
							uni.showToast({
								title: '授权成功！',
								icon: 'none'
							})
							uni.showLoading({
								mask: true
							})
							app.$Request({
								method: 'POST',
								url: '/api/user/getMiniappOpenIdByCode',
								data: {
									code: loginRes.code
								},
								ismsg: false,
							}).then(res => {
								if (res.code == 1) {
									console.log(e)
									let info = {
										openid: res.data.openid,
										encryptedData: e.detail.encryptedData,
										iv: e.detail.iv,
										session_key: res.data.session_key,
										city: app.city
									}
									app.$Request({
										method: 'POST',
										url: '/api/user/weixinMiniappMobileLogin',
										data: info,
										ismsg: true,
									}).then(res1 => {
										uni.hideLoading()
										if (res1.code == 1) {
											uni.showToast({
												title: '登录成功！',
												icon: 'none'
											});
											uni.setStorageSync('userinfo', res1.data
												.fauserinfo);
											uni.setStorageSync('token', res1.data.userinfo
												.token);
											app.ws.init(res1.data.fauserinfo.token, res1.data
												.fauserinfo.auth_token)
											setTimeout(() => {
												uni.switchTab({
													url: '/pages/index/index'
												});
											}, 1000);
										}
									})
								}
							})
						} else {
							uni.showToast({
								title: '授权失败！',
								icon: 'none'
							})
						}

					},
					fail(e) {
						console.log(e)
						uni.hideLoading()
						uni.showToast({
							title: '授权失败！',
							icon: 'none'
						})
					}
				});
			},
			gohome() {
				uni.switchTab({
					url: '/pages/index/index'
				})
			},
			goagreement(name) {
				this.$navTo.togo('/pages/my/agreement/index', {
					name: name
				})
			},
			goh5vxlogin() {
				if (!this.checked) {
					uni.showToast({
						title: '请仔细阅读并同意《注册协议》和《隐私协议》',
						icon: 'none'
					});
					return;
				}
				// 微信公众号的 AppID
				const appid = 'wxe188e858cf678dee';
				// 当前页面 URL（授权后返回该页面），需要进行 URL 编码
				const redirect_uri = encodeURIComponent(window.location.href);
				// 授权 URL，scope 为 snsapi_userinfo
				const wechatAuthUrl =
					`https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appid}&redirect_uri=${redirect_uri}&response_type=code&scope=snsapi_userinfo&state=123#wechat_redirect`;

				// 跳转到微信授权页面
				window.location.href = wechatAuthUrl;
			},
			// 微信登录成功后从 URL 获取 code，并调用后端接口登录
			handleWeixinLogin() {
				const urlParams = new URLSearchParams(window.location.search);
				const code = urlParams.get('code');
				if (code) {
					uni.showLoading({
						title: '登录中...',
						mask: true
					});

					let params = {
						platform: 'wechat',
						code: code,
						city: app.city
					};

					this.$Request({
						method: 'POST',
						url: '/api/user/third',
						data: params,
						ismsg: true,
					}).then(res => {
						uni.hideLoading();
						if (res.code === 1) {
							if (res.data.userinfo.mobile !== '') {
								uni.showToast({
									title: '登录成功！',
									icon: 'none'
								});
								uni.setStorageSync('userinfo', res.data.fauserinfo);
								uni.setStorageSync('token', res.data.userinfo.token);
								this.ws.init(res.data.fauserinfo.token, res.data.fauserinfo.auth_token)
								setTimeout(() => {
									uni.switchTab({
										url: '/pages/index/index'
									});
								}, 1000);
							} else {
								uni.showToast({
									title: '请绑定手机号！',
									icon: 'none'
								});
								this.$navTo.togo('/pages/login/bind-phone', {
									token: res.data.userinfo.token
								});
							}
						}
					});
				}
			},
			govxlogin() {
				if (this.checked == false) {
					uni.showToast({
						title: '请仔细阅读并同意《注册协议》和《隐私协议》',
						icon: 'none'
					})
					return
				}
				let app = this
				uni.showLoading({
					title: '授权中...',
					mask: true
				})
				uni.login({
					provider: 'weixin',
					onlyAuthorize: true,
					success: loginRes => {
						console.log(loginRes)
						uni.hideLoading()
						uni.showToast({
							title: '授权成功！',
							icon: 'none'
						})
						uni.showLoading({
							title: '登录中...',
							mask: true
						})
						let params = {
							platform: 'wechat',
							code: loginRes.code,
							city: app.city
						}
						app.$Request({
							method: 'POST',
							url: '/api/user/third',
							data: params,
							ismsg: true,
						}).then(res => {
							console.log(res)
							uni.hideLoading()
							if (res.code == 1) {
								uni.setStorageSync('userinfo', res.data.fauserinfo);
								if (res.data.userinfo.mobile != '') {
									uni.showToast({
										title: "登录成功！",
										icon: 'none'
									})
									uni.setStorageSync('token', res.data.userinfo.token);
									app.ws.init(res.data.fauserinfo.token, res.data.fauserinfo
										.auth_token)
									setTimeout(() => {
										uni.switchTab({
											url: '/pages/index/index'
										})
									}, 1000)
								} else {
									uni.showToast({
										title: "请绑定手机号！",
										icon: 'none'
									})
									app.$navTo.togo('/pages/login/bind-phone', {
										token: res.data.userinfo.token
									})
								}
							}
						})
					},
					fail(e) {
						console.log(e)
						uni.hideLoading()
						uni.showToast({
							title: '授权失败！',
							icon: 'none'
						})
					}
				});
			},
			gologin() {
				if (this.checked == false) {
					uni.showToast({
						title: '请仔细阅读并同意《注册协议》和《隐私协议》',
						icon: 'none'
					})
					return
				}
				if (this.tell == '') {
					uni.showToast({
						title: '手机号不可为空！',
						icon: 'none'
					})
					return
				}
				if (this.password == '') {
					uni.showToast({
						title: '密码不可为空！',
						icon: 'none'
					})
					return
				}
				uni.showLoading({
					mask: true
				})
				let params = {
					account: this.tell,
					password: this.password,
					city: this.city
				}
				this.$Request({
					method: 'POST',
					url: '/api/user/login',
					data: params,
					ismsg: true,
				}).then(res => {
					uni.hideLoading()
					if (res.code == 1) {
						uni.showToast({
							title: "登录成功！",
							icon: 'none'
						})
						uni.setStorageSync('token', res.data.userinfo.token);
						uni.setStorageSync('userinfo', res.data.fauserinfo);
						this.ws.init(res.data.fauserinfo.token, res.data.fauserinfo.auth_token)
						setTimeout(() => {
							uni.switchTab({
								url: '/pages/index/index'
							})
						}, 1000)
					}
				})
			},
			cutType() {
				if (this.status == false) {
					this.entry_type = 'text'
					this.status = true
				} else {
					this.entry_type = 'password'
					this.status = false
				}
			},
			handleChange() {
				this.checked = !this.checked
			},
		}
	}
</script>

<style lang="scss" scoped>
	.login-page {
		min-height: 100vh;
		background-image: url('https://m.lqvvvv.com/assets/static/index/home-bg.png');
		background-repeat: no-repeat;
		background-size: 100% 900rpx;
		padding: 160rpx 30rpx 100rpx 30rpx;
		background-color: #F7F8FC;

		.head-top {
			padding: 30rpx;

			.head-title {
				width: 250rpx;
				height: 70rpx;
			}

			.name {
				margin-top: 30rpx;
				color: #19394A;
				font-size: 32rpx;
			}
		}

		.content {
			background-image: url('https://m.lqvvvv.com/assets/static/login/login-bg.png');
			background-repeat: no-repeat;
			background-size: 100% 100%;
			margin-top: 60rpx;
			padding: 50rpx;

			.title {
				margin-bottom: 30rpx;

				.tell {
					width: 178rpx;
					height: 40rpx;
				}

				.psd {
					width: 64rpx;
					height: 40rpx;
				}
			}

			.entry {
				background-color: #F9F9F9;
				padding: 20rpx 30rpx;
				border-radius: 20rpx;
				margin-bottom: 30rpx;
			}

			.forget {
				color: #5755F2;
				font-size: 24rpx;
				text-align: right;
			}

			.login-btn {
				margin-bottom: 30rpx;

				image {
					width: 594rpx;
					height: 120rpx;
				}
			}

			.tips {
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-top: 40rpx;

				.line {
					width: 200rpx;
					height: 2rpx;
					background-color: #A3A2FF;
				}

				.tips-text {
					color: #000;
					font-size: 24rpx;
					padding: 0 10rpx;
				}
			}

			.logo {
				margin-top: 30rpx;
				text-align: center;

				image {
					width: 140rpx;
					height: 140rpx;
				}
			}

			.vx {
				margin-top: 30rpx;
				text-align: center;

				image {
					width: 70rpx;
					height: 70rpx;
					border-radius: 20rpx;
				}
			}

			.wx-min {
				margin: 0 auto;
				margin-top: 30rpx;
				width: 120rpx;

				image {
					width: 100%;
					height: 70rpx;
				}
			}

			.agreement {
				display: flex;
				align-items: center;
				justify-content: center;
				margin-top: 40rpx;

				.agreement-text {
					color: #8B8DA0;
					font-size: 24rpx;

					text {
						color: #5755F2;
					}
				}
			}

		}
	}
</style>